<template>
    <el-form size="small">
        <el-form-item>
            <el-radio :label="1" v-model='radioValue'>
                不填，允许的通配符[, - * /]
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio :label="2" v-model='radioValue'>
                每年
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio :label="3" v-model='radioValue'>
                周期从
                <el-input-number v-model='cycle01' :min='fullYear' :max="2098" /> -
                <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : fullYear + 1" :max="2099" />
            </el-radio>
        </el-form-item>

        <el-form-item>
            <el-radio :label="4" v-model='radioValue'>
                从
                <el-input-number v-model='average01' :min='fullYear' :max="2098" /> 年开始，每
                <el-input-number v-model='average02' :min="1" :max="2099 - average01 || fullYear" /> 年执行一次
            </el-radio>

        </el-form-item>

        <el-form-item>
            <el-radio :label="5" v-model='radioValue'>
                指定
                <el-select clearable v-model="checkboxList" placeholder="可多选" multiple>
                    <el-option v-for="item in 9" :key="item" :value="item - 1 + fullYear" :label="item -1 + fullYear" />
                </el-select>
            </el-radio>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                fullYear: 0,
                radioValue: 1,
                cycle01: 0,
                cycle02: 0,
                average01: 0,
                average02: 1,
                checkboxList: [],
                checkNum: this.$options.propsData.check
            }
        },
        name: 'crontab-year',
        props: ['check', 'month', 'cron'],
        methods: {
            // 单选按钮值变化时
            radioChange() {
                switch (this.radioValue) {
                    case 1:
                        this.$emit('update', 'year', '');
                        break;
                    case 2:
                        this.$emit('update', 'year', '*');
                        break;
                    case 3:
                        this.$emit('update', 'year', this.cycleTotal);
                        break;
                    case 4:
                        this.$emit('update', 'year', this.averageTotal);
                        break;
                    case 5:
                        this.$emit('update', 'year', this.checkboxString);
                        break;
                }
            },
            // 周期两个值变化时
            cycleChange() {
                if (this.radioValue == '3') {
                    this.$emit('update', 'year', this.cycleTotal);
                }
            },
            // 平均两个值变化时
            averageChange() {
                if (this.radioValue == '4') {
                    this.$emit('update', 'year', this.averageTotal);
                }
            },
            // checkbox值变化时
            checkboxChange() {
                if (this.radioValue == '5') {
                    this.$emit('update', 'year', this.checkboxString);
                }
            }
        },
        watch: {
            'radioValue': 'radioChange',
            'cycleTotal': 'cycleChange',
            'averageTotal': 'averageChange',
            'checkboxString': 'checkboxChange'
        },
        computed: {
            // 计算两个周期值
            cycleTotal: function () {
                const cycle01 = this.checkNum(this.cycle01, this.fullYear, 2098)
                const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : this.fullYear + 1, 2099)
                return cycle01 + '-' + cycle02;
            },
            // 计算平均用到的值
            averageTotal: function () {
                const average01 = this.checkNum(this.average01, this.fullYear, 2098)
                const average02 = this.checkNum(this.average02, 1, 2099 - average01 || this.fullYear)
                return average01 + '/' + average02;
            },
            // 计算勾选的checkbox值合集
            checkboxString: function () {
                let str = this.checkboxList.join();
                return str;
            }
        },
        mounted: function () {
            // 仅获取当前年份
            this.fullYear = Number(new Date().getFullYear());
            this.cycle01 = this.fullYear
            this.average01 = this.fullYear
        }
    }
</script>